import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('@/views/layout/index.vue'), // 默认打开的是内容主页
    redirect: '/home', // 在重定向到home组件去
    children: [
      {
        path: 'home', // 首页组件
        component: () => import('@/views/home')
      },
      {
        path: 'user-info', // 个人中心的基本资料组件
        component: () => import('@/views/user/userinfo.vue')
      }, {
        path: 'user-avatar', // 个人中心的更换头像的组件
        component: () => import('@/views/user/userAvatar.vue')
      }, {
        path: 'user-pwd', // 个人中心的更换密码的组件
        component: () => import('@/views/user/userPwd.vue')
      }, {
        path: 'art-cate', // 文章分类的组件
        component: () => import('@/views/article/artCate.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index.vue') // 登录页
  },
  {
    path: '/register',
    component: () => import('@/views/register/index.vue') // 注册页
  }
]
const router = new VueRouter({
  routes
})

const whiteList = ['/login'] // 定义应该白名单

// 全局前置路由守卫
router.beforeEach((to, form, next) => { // 解决换个账号不跟新用户信息的问题
  const token = store.state.token
  if (token) { // 有token值可以访问所有页面
    if (token && !store.state.userInfo.username) { // 如果有token并且不能有名字才请求
      store.dispatch('getUserInfoActions')
    }
    next()
  } else { // 没有token的值 只能访问首页和注册页 白名单
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next({ path: '/login' })
    }
  }
})

export default router
